```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jan - 100%离线的AI助手平台</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #2d3748;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .feature-icon {
            font-size: 2rem;
            background: linear-gradient(135deg, #4f46e5 0%, #9333ea 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 4rem;
            line-height: 0.8;
            margin: 0.15em 0.1em 0 0;
            font-weight: 600;
            color: #4f46e5;
        }
        .mermaid-container {
            background-color: #f8fafc;
            border-radius: 0.5rem;
            padding: 1.5rem;
        }
    </style>
</head>
<body class="antialiased bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-6xl flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
                <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Jan AI 助手平台</h1>
                <p class="text-xl md:text-2xl mb-8 opacity-90 leading-relaxed">
                    100%离线运行的开源AI平台，为开发者、研究人员和隐私敏感用户提供强大而可控的AI体验
                </p>
                <div class="flex flex-col sm:flex-row gap-4">
                    <a href="https://github.com/menloresearch/jan" class="bg-white text-indigo-600 hover:bg-gray-100 font-semibold py-3 px-6 rounded-lg transition duration-300 flex items-center justify-center gap-2">
                        <i class="fab fa-github"></i> GitHub 项目
                    </a>
                    <a href="https://jan.ai" class="bg-indigo-800 hover:bg-indigo-900 text-white font-semibold py-3 px-6 rounded-lg transition duration-300 flex items-center justify-center gap-2">
                        <i class="fas fa-external-link-alt"></i> 官方网站
                    </a>
                </div>
            </div>
            <div class="md:w-1/2">
                <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1753429703607-75703cb8-d21f-4f67-b500-1f71edaf863b.png" alt="Jan AI 界面截图" class="rounded-xl shadow-2xl border-4 border-white">
            </div>
        </div>
    </section>

    <!-- Problem Solution Section -->
    <section class="py-16 px-4 md:px-0 bg-white">
        <div class="container mx-auto max-w-4xl">
            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">它能解决什么问题？</h2>
            <div class="bg-gray-50 p-8 rounded-xl shadow-sm">
                <p class="drop-cap text-lg mb-6">
                    使用云端 AI 服务时，用户常面临隐私泄露风险、高昂订阅费用、依赖网络连接，以及对模型和功能定制的限制。许多开源 AI 工具配置复杂，难以快速上手，且不支持跨应用集成。
                </p>
                <div class="bg-indigo-50 border-l-4 border-indigo-500 p-4 mb-6">
                    <p class="font-semibold text-indigo-700">
                        <i class="fas fa-lightbulb mr-2"></i> Jan 正是为解决这些问题而设计，提供完全离线的 AI 运行环境，支持本地模型和扩展，保障隐私的同时简化开发和使用流程。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-16 px-4 md:px-0 bg-gray-50">
        <div class="container mx-auto max-w-6xl">
            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">核心功能概述</h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="feature-icon mb-4">
                        <i class="fas fa-lock"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">本地模型运行</h3>
                    <p class="text-gray-600">支持从 HuggingFace 下载并运行 Llama、Gemma、Qwen 等模型，100% 离线操作，保护数据隐私。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="feature-icon mb-4">
                        <i class="fas fa-cloud"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">云端集成</h3>
                    <p class="text-gray-600">连接 OpenAI、Anthropic、Mistral 等云端 API，灵活适配混合使用场景。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="feature-icon mb-4">
                        <i class="fas fa-plug"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">OpenAI 兼容 API</h3>
                    <p class="text-gray-600">提供本地服务器(localhost:1337)，允许其他应用通过标准 API 调用 Jan 的 AI 功能。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="feature-icon mb-4">
                        <i class="fas fa-robot"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">自定义助手</h3>
                    <p class="text-gray-600">支持创建专属 AI 助手，满足特定任务需求，如代码调试或文档总结。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="feature-icon mb-4">
                        <i class="fas fa-puzzle-piece"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">MCP 集成</h3>
                    <p class="text-gray-600">通过 Model Context Protocol 支持与外部工具交互，扩展文件操作、搜索等功能。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="feature-icon mb-4">
                        <i class="fas fa-users"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">活跃社区</h3>
                    <p class="text-gray-600">拥有 35k 星标和 2.1k 分叉，社区活跃，提供持续更新和技术支持。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-16 px-4 md:px-0 bg-white">
        <div class="container mx-auto max-w-4xl">
            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">使用场景</h2>
            <div class="space-y-6">
                <div class="bg-indigo-50 p-6 rounded-lg flex flex-col md:flex-row items-start gap-6">
                    <div class="bg-indigo-100 p-4 rounded-full flex-shrink-0">
                        <i class="fas fa-user-shield text-indigo-600 text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold mb-2 text-indigo-800">隐私敏感的数据分析</h3>
                        <p class="text-gray-700">
                            研究人员使用 Jan 运行本地模型，分析敏感数据集（如医疗记录），无需上传到云端，确保数据安全。
                            <span class="font-semibold text-indigo-600 mt-2 block">你的工作是否涉及需要保护隐私的数据处理？</span>
                        </p>
                    </div>
                </div>
                <div class="bg-blue-50 p-6 rounded-lg flex flex-col md:flex-row items-start gap-6">
                    <div class="bg-blue-100 p-4 rounded-full flex-shrink-0">
                        <i class="fas fa-code text-blue-600 text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold mb-2 text-blue-800">离线代码开发</h3>
                        <p class="text-gray-700">
                            开发者通过 Jan 的本地 API 和自定义助手，离线生成代码补全或调试建议，适合无网络环境。
                        </p>
                    </div>
                </div>
                <div class="bg-purple-50 p-6 rounded-lg flex flex-col md:flex-row items-start gap-6">
                    <div class="bg-purple-100 p-4 rounded-full flex-shrink-0">
                        <i class="fas fa-tasks text-purple-600 text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold mb-2 text-purple-800">自动化任务处理</h3>
                        <p class="text-gray-700">
                            企业用户配置 Jan 助手处理重复性任务，如批量文档总结或邮件草稿生成，提升效率。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Comparison Section -->
    <section class="py-16 px-4 md:px-0 bg-gray-50">
        <div class="container mx-auto max-w-4xl">
            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">优势与特色</h2>
            <div class="mermaid-container">
                <div class="mermaid">
                    graph TD
                    A[Jan 优势] --> B[完全离线运行]
                    A --> C[高度可扩展]
                    A --> D[活跃社区]
                    A --> E[跨平台支持]
                    B --> F[隐私保护]
                    B --> G[无需网络]
                    C --> H[插件系统]
                    C --> I[MCP集成]
                    D --> J[35k GitHub星标]
                    D --> K[持续更新]
                    E --> L[macOS/Windows/Linux]
                </div>
            </div>
            <div class="mt-8 bg-white p-6 rounded-xl shadow-sm">
                <h3 class="text-xl font-bold mb-4 text-gray-800">局限性</h3>
                <p class="text-gray-600">
                    本地运行需要较高硬件性能（如 16GB RAM 用于大型模型），配置模型和扩展对新手可能有一定学习曲线。
                </p>
            </div>
        </div>
    </section>

    <!-- Getting Started Section -->
    <section class="py-16 px-4 md:px-0 bg-white">
        <div class="container mx-auto max-w-4xl">
            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">上手指南</h2>
            <div class="space-y-4">
                <div class="flex items-start gap-4">
                    <div class="bg-indigo-100 text-indigo-600 font-bold rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mt-1">1</div>
                    <div>
                        <h3 class="text-xl font-bold mb-2 text-gray-800">下载 Jan</h3>
                        <p class="text-gray-600">
                            访问 <a href="https://jan.ai" class="text-indigo-600 hover:underline">https://jan.ai</a> 或 GitHub Releases 下载适合你的操作系统的安装包。
                        </p>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <div class="bg-indigo-100 text-indigo-600 font-bold rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mt-1">2</div>
                    <div>
                        <h3 class="text-xl font-bold mb-2 text-gray-800">安装依赖</h3>
                        <p class="text-gray-600">
                            确保安装 Node.js 和 Rust，或使用 <code class="bg-gray-100 px-2 py-1 rounded">mise</code> 自动管理依赖：<br>
                            <code class="bg-gray-100 px-2 py-1 rounded block mt-2">curl https://mise.run | sh</code>
                            <code class="bg-gray-100 px-2 py-1 rounded block mt-1">mise install</code>
                        </p>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <div class="bg-indigo-100 text-indigo-600 font-bold rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mt-1">3</div>
                    <div>
                        <h3 class="text-xl font-bold mb-2 text-gray-800">克隆仓库</h3>
                        <p class="text-gray-600">
                            运行 <code class="bg-gray-100 px-2 py-1 rounded">git clone https://github.com/menloresearch/jan</code> 并进入目录 <code class="bg-gray-100 px-2 py-1 rounded">cd jan</code>。
                        </p>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <div class="bg-indigo-100 text-indigo-600 font-bold rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mt-1">4</div>
                    <div>
                        <h3 class="text-xl font-bold mb-2 text-gray-800">启动开发环境</h3>
                        <p class="text-gray-600">
                            执行 <code class="bg-gray-100 px-2 py-1 rounded">mise dev</code> 或 <code class="bg-gray-100 px-2 py-1 rounded">npm install && npm run dev</code> 启动 Jan。
                        </p>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <div class="bg-indigo-100 text-indigo-600 font-bold rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mt-1">5</div>
                    <div>
                        <h3 class="text-xl font-bold mb-2 text-gray-800">配置模型</h3>
                        <p class="text-gray-600">
                            在 Jan 界面选择并下载模型（如 Llama），或在设置中添加云端 API 密钥。
                        </p>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <div class="bg-indigo-100 text-indigo-600 font-bold rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mt-1">6</div>
                    <div>
                        <h3 class="text-xl font-bold mb-2 text-gray-800">开始使用</h3>
                        <p class="text-gray-600">
                            通过界面创建助手或调用 localhost:1337 API 进行交互。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-16 px-4 md:px-0 hero-gradient">
        <div class="container mx-auto max-w-4xl text-center">
            <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">准备好体验完全离线的AI助手了吗？</h2>
            <p class="text-xl text-indigo-100 mb-8">立即下载 Jan，开始在本地运行强大的AI模型，保护您的数据隐私</p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="https://github.com/menloresearch/jan" class="bg-white text-indigo-600 hover:bg-gray-100 font-semibold py-3 px-6 rounded-lg transition duration-300 flex items-center justify-center gap-2">
                    <i class="fab fa-github"></i> GitHub 下载
                </a>
                <a href="https://jan.ai" class="bg-indigo-800 hover:bg-indigo-900 text-white font-semibold py-3 px-6 rounded-lg transition duration-300 flex items-center justify-center gap-2">
                    <i class="fas fa-globe"></i> 访问官网
                </a>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            },
            themeVariables: {
                primaryColor: '#e2e8f0',
                primaryTextColor: '#2d3748',
                primaryBorderColor: '#cbd5e0',
                lineColor: '#4f46e5',
                textColor: '#2d3748',
                fontSize: '14px'
            }
        });
    </script>
</body>
</html>
```